<template>
  <m-page-wrapper>
    <m-crud ref="crudRef" :option="option">
      <template #menuCenter v-if="appListOptions.length">
        <a-form>
          <a-form-item label="切换应用">
            <a-select @change="handleSelectChange" style="width: 225px;" v-model:value="appCode" :options="appListOptions" />
          </a-form-item>
        </a-form>
      </template>
    </m-crud>
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { CrudType } from '/@/components/Crud/types';
import { appList } from '/@/api/sys/menu';
import { columns } from './schemas'
const crudRef = ref()
const appCode= ref()
const appListOptions = ref<Array<{ label: string, value: string }>>([])
const option = ref<CrudType>({
  // 不显示搜索
  showSearch: false,
  // 弹窗类型
  // dialogType: 'drawer',
  // 弹窗属性
  dialogProps: {
    width: '60%'
  },
  // 表单属性
  formProps: {
    labelWidth: '100px',
    // labelCol: { flex: '100px' },
  },
  dynamicFormValues() {
    return {
      appCode: appCode.value
    }
  },
  // 标题
  title: '菜单',
  // 列表接口
  api: '/sys/menu/list',
  // 添加保存接口
  saveApi: '/sys/menu/save',
  // 添加保存接口
  updateApi: '/sys/menu/update',
  // 删除接口
  delApi: '/sys/menu/remove',
  // 添加的权限码
  addPerms: 'sys:menu:save',
  // 修改的权限码
  editPerms: 'sys:menu:update',
  // 查看的权限码
  viewPerms: 'sys:menu:detail',
  // 删除的权限码
  delPerms: 'sys:menu:remove',
  columns: columns,
    treeProps: {
      btnText: '子菜单',
      btnPerms: '/sys/menu:save'
    },
    tableProps: {
      simple: {},
      beforeFetch(params: any){
        return {
          ...params,
          m_EQ_appCode: appCode.value
        }
      }
    }
})
const handleSelectChange = () =>{
  crudRef.value?.getTableRef()?.reload();
}
onMounted(()=>{
  appList({}).then((res: any)=>{
    appListOptions.value = res.data;
    if(!appCode.value && appListOptions.value.length) {
      appCode.value = appListOptions.value[0].value;
    }
  })
})
</script>
<style lang="less" scoped>

</style>